<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子合同申请</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>


    <style>
        .top_btn_box {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .concent {
            display: flex;
            justify-content: space-between;
        .input_box {
            height: 500px;
            overflow: auto;
        }
        }

        body{
            padding: 10px;
        }
    </style>
</head>
<body>

    <div id="app">
        <template>
            <div class="app-container">
                <!-- 顶部按钮部分 -->
                <div class="top_btn_box">
                    <div>
                        <el-button size="small" type="primary" @click="openChoosePerson"
                        >新增</el-button
                        >
                        <el-button
                                size="small"
                                type="success"
                                v-show="hasData"
                                @click="savePerson"
                        >保存</el-button
                        >
                    </div>
                    <div v-show="hasData">
                        <el-button size="small" type="danger" @click="deleteRow"
                        >删除</el-button
                        >
                        <el-button
                                size="small"
                                type="primary"
                                style="margin-right: 10px"
                                @click="submitForReview"
                        >提交审核</el-button
                        >
                        <helpBtn :helpId="3002" />
                    </div>
                </div>

                <!-- flex布局 -->
                <div class="concent" v-show="hasData">
                    <div class="input_box">
                        <!-- 公共录入组件 -->
                        <inputCommon
                                ref="inputCommon"
                                module="personalBasicInformation-05"
                                tableId="16"
                                v-loading="loading"
                        ></inputCommon>
                    </div>
                    <div style="width: 480px">
                        <template>
                            <el-table
                                    ref="familyTable"
                                    :data="tableData"
                                    @row-click="rowClick"
                                    @selection-change="changeSelect"
                                    v-loading="loading"
                                    highlight-current-row
                                    style="width: 100%;margin-right:10px;"
                            >
                                <el-table-column type="selection"  width="50"> </el-table-column>
                                <el-table-column type="index" width="50" label="序号">
                                </el-table-column>
                                <el-table-column property="zdzwmc" label="字段名称">
                                </el-table-column>
                                <el-table-column property="oldv" label="原值"> </el-table-column>
                                <el-table-column property="xzv" label="现值"> </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </div>

                <!-- 选择个人信息弹窗 -->
                <ChoosePerson :visible="choosePerson.visible" :remoteClose="remoteClose" />
            </div>
        </template>

    </div>

    <script>


        var vm = new Vue({
           el:"#app",
            data() {
                return {
                    // 选择人员
                    choosePerson: {
                        visible: false,
                    },
                    // 当前编辑的表单ID
                    formId: "",
                    hasData: false,
                    loading: false,
                };
            },
            created() {
                this.getData();
            },
            methods: {
                // 抓取数据判断是否有未提交数据
                async getData() {
                    const res = await api.postBody(
                        "/admin/api/bfmc/BasicInformationModificationController/familyUpdatePageInit"
                    );
                    if (res.code == 1) {
                        if (res.data.list.length == 0) {
                            console.log("没有数据");
                            this.$refs.inputCommon.formData = {};
                            this.$refs.familyList.tableData = [];
                            this.hasData = false;
                        } else {
                            console.log("有数据");
                            this.hasData = true;
                            this.render(res.data);
                        }
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                // 选择新的家属
                async getInputAndList(data) {
                    console.log(data);
                    this.hasData = true;
                    this.choosePerson.visible = false;
                    this.render(data);
                },
                // 渲染全部页面
                render(dataObj) {
                    this.$refs.inputCommon.formData = dataObj.input.newDto;
                    this.formId = dataObj.input.id;
                    this.tableData = dataObj.list[0].list;
                    this.$refs.familyList.openRow = [dataObj.input.newDto.pcc001];
                    this.$refs.familyList.highlight(dataObj.list[0]);
                    this.$refs.familyList.selectAll();
                },
                async chooseSubmit(data) {
                    if (JSON.stringify(data) == "{}") {
                        this.$message.error("请先选中一条数据");
                        return;
                    } else {
                        const params = {
                            pcc001: data[0].pcc001,
                        };
                        load();
                        const res = await api.queryBody(
                            "/admin/api/bfmc/BasicInformationModificationController/chooseAfamily",
                            params
                        );
                        layer.closeAll();
                        if (res.code == 1) {
                            this.getInputAndList(res.data);
                        } else {
                            this.$message.error(res.msg);
                        }
                    }
                },
                // 打开人员选择窗口
                openChoosePerson() {
                    let _this = this;
                    let btn = {
                        btn: ['确定', '取消']
                        , yes: async function (index, layero) {
                            //按钮【按钮一】的回调
                            let win = getTopIframe(layero);
                            let data = win.vm.selectData;
                            if(data.length>1){
                                top.alert("只能选择一条记录进行操作！");
                                return;
                            }
                            if(data.length == 0){
                                top.alert("请选择一条记录进行操作！");
                                return;
                            }
                            _this.chooseSubmit(data);
                            top.layer.closeAll();
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    };

                    top.f_layer_open_get("/admin/html/dataManagement/list.html?tableId="+getTableId("16"), "90%", "60%", function () {

                    }, btn, "选择家属基本信息");
                },
                // 关闭选择窗口
                remoteClose() {
                    this.choosePerson.visible = false;
                },
                // 保存数据
                async savePerson() {
                    const params = {
                        id: this.formId,
                        mapdata: this.$refs.inputCommon.formData,
                    };
                    const res = await api.postBody(
                        "/admin/api/bfmc/BasicInformationModificationController/saveFormData",
                        params
                    );
                    if (res.code == 1) {
                        // console.log('保存',res);
                        this.$refs.familyList.loading = true;
                        // 更新右侧数据
                        this.$refs.familyList.tableData = res.data;
                        setTimeout(() => {
                            this.$refs.familyList.loading = false;
                            this.$refs.familyList.selectAll();
                        }, 500);
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                // 点击右侧数据渲染左侧表单
                changeFamily(row) {
                    // console.log(row);
                    this.loading = true;
                    this.$refs.inputCommon.formData = row.newDto;
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                },
                // 删除右侧选中行
                deleteRow() {
                    this.$confirm("此操作将删除该行, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(async () => {
                            let url =
                                "/admin/api/bfmc/BasicInformationModificationController/deleteData";
                            let res = await api.queryBody(url, {
                                ids: this.formId,
                            });
                            if (res.code == 1) {
                                this.$message.success(res.msg);
                                this.getData();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch(() => {
                            this.$message.info("已取消删除");
                        });
                },
                // 提交审核
                async submitForReview() {
                    if(this.$refs.familyList.selectStr == ""){
                        alertMsg({code:"0",msg:"请至少选择一个字段进行审核"});
                        return ;
                    }
                    const params = {
                        dataid: this.formId+","+this.$refs.familyList.selectStr,
                        lcbh: "modificationOfFamilyMembers",
                    };
                    const res = await api.queryBody(
                        "/admin/api/pmc/ProcessManagementController/review",
                        params
                    );
                    if (res.code == 1) {
                        console.log(res);
                        this.$message.success(res.msg);
                        setTimeout(() => {
                            this.getData();
                        }, 500);
                    } else {
                        this.$message.error(res.msg);
                    }
                },
            },
        });
    </script>
</body>
</html>